<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tabbar动画</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #222;
            color: #fff;
            overflow: hidden;
            height: 100vh;
        }


        input {
            background: none;
            border: none;
            outline: none;
            vertical-align: middle;
        }

        [v-cloak] {
            display: none;
        }

        button {
            border: none;
            background: transparent;
            outline: none;
        }

        .flex-column {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .j_c {
            justify-content: center;
        }
    </style>
    <style>
        @font-face {
            font-family: 'iconfont';
            /* Project id 3655600 */
            src:
                url('http://at.alicdn.com/t/c/font_3655600_r9v7xsvvn3.woff2?t=1664193822693') format('woff2'),
                url('http://at.alicdn.com/t/c/font_3655600_r9v7xsvvn3.woff?t=1664193822693') format('woff'),
                url('http://at.alicdn.com/t/c/font_3655600_r9v7xsvvn3.ttf?t=1664193822693') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .icon-susushutiao:before {
            content: "\e658";
        }

        .icon-susutiantong:before {
            content: "\e65d";
        }

        .icon-susubaomihua:before {
            content: "\e660";
        }

        .icon-susumakalong:before {
            content: "\e662";
        }

        .icon-susuhuafubing:before {
            content: "\e68f";
        }

        .icon-susutongluoshao:before {
            content: "\e69d";
        }

        .icon-susuxiaoxiongruantang-46:before {
            content: "\e60e";
        }

        .icon-susuxiaoxiongruantang-47:before {
            content: "\e60f";
        }

        .icon-susuxiaoxiongruantang-44:before {
            content: "\e610";
        }

        .icon-susuxiaoxiongruantang-45:before {
            content: "\e613";
        }

        .icon-susushiwutubiao-49:before {
            content: "\e616";
        }

        .icon-susushiwutubiao00-70:before {
            content: "\e618";
        }

        .icon-susushiwutubiao00-74:before {
            content: "\e619";
        }

        .icon-susushiwutubiao00-72:before {
            content: "\e61a";
        }

        .icon-susua-2-53:before {
            content: "\e611";
        }

        .icon-susua-2-57:before {
            content: "\e612";
        }

        .icon-susua-2-61:before {
            content: "\e614";
        }

        .icon-susunailao:before {
            content: "\e65b";
        }

        .icon-susukele:before {
            content: "\e65c";
        }

        .icon-susuhanbao:before {
            content: "\e65e";
        }

        .icon-susupaofu-53:before {
            content: "\e617";
        }

        .icon-susubingsha:before {
            content: "\e698";
        }

        .icon-sususuannai:before {
            content: "\e699";
        }

        .icon-susushiwutubiao00-66:before {
            content: "\e61c";
        }
    </style>
    <style>
        :root {
            --color: #222;
            --bg: orange;
            --w: 100px;
            --t: 450px;
            --c: 70px;
        }

        .container{
            background: #fff;
            width: var(--t);
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            position: relative;
        }
        .item{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: var(--w);
            cursor: pointer;
        }
        .item span{
            font-size: 20px;
            position: relative;
            z-index: 1;
            transition: all 0.5s;
        }
        .item p{
            position: absolute;
            font-size: 15px;
            font-weight: bold;
            color: var(--color);
            transform: translateY(20px);
            transition: all 0.5;
            opacity: 0;
        }
        .item:hover p,
        .item.active p{
            opacity: 1;
            transform: translateY(12px);
        }
        .item:hover span,
        .item.active span{
            transform: translateY(-35px);
        }
        .active-box{
            position: absolute;
            width: var(--c);
            height: var(--c);
            background: var(--bg);
            --left-pad: calc(var(--t) - (4 * var(--w)));
            top: -50%;
            left: calc(var(--left-pad) / 2 + (var(--w) / 2) - (var(--c) / 2));
            border-radius: 50%;
            border: 4px solid var(--color);
            transition: all 0.5s;
            transform: translateX(calc(var(--w) * var(--n)));
        }
        .active-box::before,
        .active-box::after{
            content: "";
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            background: transparent;
        }
        .active-box::before{
            left: -20px;
            border-radius: 0 20px 0 0;
            box-shadow: 0 -10px 0 0 var(--color);
        }
        .active-box::after{
            right: -20px;
            border-radius: 20px 0 0 0;
            box-shadow: 0 -10px 0 0 var(--color);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 第一个默认选中 -->
        <div class="item active" style="--n: 0">
            <span class="iconfont">&#xe611;</span>
            <p>三明治</p>
        </div>
        <div class="item" style="--n: 1">
            <span class="iconfont">&#xe65e;</span>
            <p>汉堡</p>
        </div>
        <div class="item" style="--n: 2">
            <span class="iconfont">&#xe698;</span>
            <p>沙冰</p>
        </div>
        <div class="item" style="--n: 3">
            <span class="iconfont">&#xe65c;</span>
            <p>可乐</p>
        </div>
        <!-- 添加选中圆环 -->
        <div class="active-box" style="--n: 0"></div>
    </div>
</body>
<script>
    const list = document.querySelectorAll(".item");
    let node = document.getElementsByClassName("active-box")[0];

    function clickActive(){
        list.forEach(item=>{
            item.classList.remove("active");
        });
        this.classList.add("active");
        // trim()删除字符串的头尾空白符;
        node.style.setProperty("--n",this.style.getPropertyValue("--n").trim());
    }
    list.forEach(item=>{
        item.addEventListener("click",clickActive);
    });
</script>
</html>